<!--
 * @Author: wang_changtan 2196064304@qq.com
 * @Date: 2024-02-20 08:18:34
 * @LastEditors: wang_changtan 2196064304@qq.com
 * @LastEditTime: 2024-02-21 11:33:00
 * @FilePath: /web_music_app_vue3_vite_ts/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>

  <div class="container">
    <Header/>
    <div class="main">
        <div class="left">
            <Aside/>
        </div>
        <div class="right">
          <router-view></router-view>
        </div>
    </div>
    <Footer/>
</div>
  
</template>

<script setup lang="ts">

import Header from "@/components/Header/index.vue";
import Aside from "@/components/Aside/index.vue";
import Footer from "@/components/Footer/index.vue";

</script>

<style scoped lang="less">

.container {
  width:100%;
  height: 100vh;
  min-width: 1100px;
  .main {
      height: calc(100% - 120px);
      width: 100%;
      display: flex;
      .left {
          width: 180px;
          height: 100%;
      }
      .right {
          width: calc(100% - 180px);
          height: 100%;
          background-color: @mainBgColor;
      }
  }
}

</style>
